<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>响应式</title>
    <!-- <script src="./vue.global.js"></script> -->
    <!--引入vue2开发版本的vue核心包-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<!--
watch 监听某个值的变化，执行某个业务操作
场景1：直接监视属性值
场景2 监视对象中的属性  需要用 '对象.属性'(newVal) 才可以

翻译：
接口地址：https://applet-base-api-t.itheima.net/api/translate
请求方式：get
请求参数：
words:需要翻译的文本
lang: 需要翻译成的语言
-->

<body>
    <div id="app">
        <input type="textarea" v-model="keywords">
        <input type="textarea" disabled>{{fan}}
        <hr>
        监听对象中的属性<input type="textarea" v-model="obj.words">{{obj.words}}
    </div>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                keywords: '',
                fan: '',
                obj: {
                    words: ''
                },
            },
            watch: {
                // n 为新值，o为 旧值
                async keywords(n, o) {
                    // 原始写法，不防抖，输入一个字符就开始调用翻译接口
                    // const result = await axios({
                    //     url:'https://applet-base-api-t.itheima.net/api/translate',
                    //     params:{
                    //         words:n
                    //     }
                    // })
                    // console.log(result)
                    // this.fan = result.data.data

                    // 防抖优化写法：延迟执行-》干啥事先等一等，不着急，延迟一会，一段时间内没有再次触发，才执行
                    clearTimeout(this.timer)
                    this.timer = setTimeout(async () => {
                        const result = await axios({
                            url: 'https://applet-base-api-t.itheima.net/api/translate',
                            params: {
                                words: n
                            }
                        })
                        console.log(result.data.data)
                        this.fan = result.data.data
                    }, 300);


                },

                // 当监听对象的属性时，需要用引号 引起来
                'obj.words'(n, o) {
                    console.log("值发生了变化" + n)
                }
            }
        })
    </script>

</body>

</html>